<template>
	<div class="page">
		<transition :name="transition">
			<router-view></router-view>
		</transition>
	</div>
</template>
<script>
	export default{
		name:'foo',
		data(){
			return{
				transition:'slideInRight'
			}
		},
		watch:{
		  '$route'(to,from){
		     this.transition = to.meta > from.meta? 'slideInRight' : 'slideInLeft';
		   }
		}
	}
</script>
<style>
	.page{
		width: 100%;
		height: 300px;
		background: pink;
		transition: all .3s ease-in-out;
		position: absolute;
		top: 350px;
		left: 0;
	}
	.transition{
		transition: all .3s ease-in-out;
		position: absolute;
		top:0;
		left: 0;
		width: 100%;
	}
</style>